<style>

    .select2-container--default.select2-container--focus .select2-selection--multiple {
        border: solid #FFF 0px;
        border-bottom: 2px solid #eee;
        outline: 0;
    }

    .select2-container--default .select2-selection--multiple {
        margin-top: 5px;
        background-color: white;
        border-radius: 4px;
        border: solid #FFF 0px;
        border-bottom: 2px solid #eee;
        cursor: text;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: #FFFFFF;
        border: 2px solid #eee;
        border-radius: 4px;
        cursor: default;
        float: left;
        margin-right: 5px;
        margin-top: 5px;
        padding: 0 5px;
    }
</style>
<div id="createDialog" class="crudDialog">
    <form id="createForm" method="post">
        <div id="add" class="form-group">
            <label for="courseName">课程名称</label>
            <input id="courseName" type="text" class="form-control" name="courseName" maxlength="20"/>
        </div>
        <div id="update" class="form-group">
            <label for="courseUrl">课程链接</label>
            <input id="courseUrl" type="text" class="form-control" name="courseUrl" maxlength="20"/>
        </div>
        <div class="form-group">
            <label for="courseImg">课程图片</label>
            <input id="courseImg" type="text" class="form-control" name="courseImg" maxlength="50"/>
        </div>
        <div class="form-group">
            <label for="courseDesc">课程描述</label>
            <input id="courseDesc" type="text" class="form-control" name="courseDesc" maxlength="50"/>
        </div>
        <br/>
        <div>
            <label style="color:#999">课程类型: </label>
            <div class="radio radio-inline radio-success">
                <input id="status_0" type="radio" name="courseType" value="0">
                <label for="status_0">单体架构 </label>
            </div>
            <div class="radio radio-inline radio-danger">
                <input id="status_1" type="radio" name="courseType" value="1">
                <label for="status_1">分布式架构 </label>
            </div>
            <div class="radio radio-inline">
                <input id="status_2" type="radio" name="courseType" value="2">
                <label for="status_2">大数据 </label>
            </div>
        </div>
        <br/>
        <div class="form-group">
            <label for="courseSource">课程来源</label>
            <input id="courseSource" type="text" class="form-control" name="courseSource" maxlength="50"/>
        </div>
        <div class="form-group text-right dialog-buttons">
            <a class="waves-effect waves-button" href="javascript:;" onclick="createSubmit();">保存</a>
            <a class="waves-effect waves-button" href="javascript:;" onclick="createDialog.close();">取消</a>
        </div>

    </form>
</div>
<script>

    function getCourseById(id, fc) {
        iGet('/api/course/' + id, fc)
    }
    var id = 0;
    //select2
    $(".select2").select2({
        maximumSelectionLength: 10,
        language: "zh-CN",
    });

    //选中某个标签
    function selectTag(value) {
        $(".select2").val(value).trigger('change');
    }

    setTimeout(function () {
        if (location.href.indexOf('#') > 0) {
            id = location.href.split("#")[1];
        }
        //判断是否是更新操作
        // if (id == 0) {
        //     $('#update').remove();
        // } else {
        //     $('#add').remove();
        // }
        //更新获取用户数据
        if (id != 0) {
            getCourseById(id, function (data) {
                var cource = Object.assign(data, data.details);
                //设置input 此处没有用vue vue与inputmask有兼容性问题
                for (var p in cource) {
                    if (p == 'courseType') {
                        try {
                            $("input:radio[value=" + cource[p] + "]").attr('checked', 'true');
                        } catch (e) {
                            console.log("radio")
                        }
                    } else {
                        $("input[name=" + p + "]").val(cource[p]);
                    }
                }
            });
        } else {
            // getRoles(function (data) {
            //     var roles = []
            //     data.content.forEach(function (role) {
            //         roles.push({text: role.name, id: role.id});
            //     })
            //     $(".select2").select2({
            //         data: roles
            //     });
            // })
        }
        //去掉有值的input标题效果
        var inputs = $("#createForm input[type=text]");
        for (var i = 0; i < inputs.length; i++) {
            if ($(inputs[i]).val() != '') {
                $(inputs[i]).parent().find('label').addClass('active');
            }
        }
        //Money Euro
        $("[data-mask]").inputmask();
    }, 300)


    function createSubmit() {
        var data = {};
        $('#createForm').serializeArray().map(function (x) {
            data[x.name] = x.value;
        });
        var beforeSend = function () {
            if (id == 0) {
                if ($('#loginName').val() == '') {
                    $('#loginName').focus();
                    return false;
                }
            } else {
                if ($('#nickname').val() == '') {
                    $('#nickname').focus();
                    return false;
                }
            }

        }
        var roleIds = $(".select2").val();
        var roles = []
        if (roleIds) {
            roleIds.forEach(function (role) {
                roles.push({id: parseInt(role)});
            });
        }
        data.roleSet = roles;
        var success = function (result) {
            createDialog.close();
            $table.bootstrapTable('refresh');
        }
        var error = function (jqXHR, textStatus) {
            $.confirm({
                theme: 'dark',
                animation: 'rotateX',
                closeAnimation: 'rotateX',
                title: false,
                content: textStatus != 'canceled' ? '系统异常' : '请检查密码与用户名',
                buttons: {
                    confirm: {
                        text: '确认',
                        btnClass: 'waves-effect waves-button waves-light'
                    }
                }
            });
        }
        let d = Object.assign({}, data, {details: data});
        if (id == 0) {
            iPost('/api/course', d, beforeSend, success, error);
        } else {
            iPut('/api/course/' + id, d, beforeSend, success, error);
        }

    }
</script>
